<template>
    <div class="menu"> 


      <el-row type="flex" justify="center" >        
        <el-col :span="18">
        <!-- 菜单表头  -->  
          <div class="my_menuheader">
             <div >
              <el-button style="margin-left:30px;" type="danger" icon="el-icon-food">菜单详情</el-button>
            </div>       
              <ul>
                <li> <router-link to='/' style="color:#333">首页</router-link><el-divider direction="vertical" content-position='center'></el-divider></li>
                <li>分类</li>
                <li>排行</li>
                <li>热菜</li>
                <li>甜点</li>            
                <!-- <li>西餐</li> -->
              </ul>
            <div >
              <el-input v-model="input" placeholder="请输入内容"><el-button type="primary" icon="el-icon-search" slot="append" @click="open">搜索</el-button></el-input>
            </div>
          </div>
          <!-- 分割线 -->
           <el-divider style="color: #ff6767;"><i style="font-size:22px" class="el-icon-dessert" size='big'></i></el-divider>
          <!-- 走马灯 -->
        <template class="madeng">
          <el-carousel :interval="5000" type="card" height="300px" width='100%'>
            <el-carousel-item >
              <img src="../assets/img/banner_2.jpg" width="600px" height="300px" >
            </el-carousel-item>
            <el-carousel-item >
              <img src="../assets/img/banner_21.jpg" width="600px" height="300px">
            </el-carousel-item>
            <el-carousel-item >
               <img src="../assets/img/banner_22.jpg" width="600px" height="300px">
            </el-carousel-item>
          </el-carousel>
        </template>
          <!-- 菜单详情  -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
             
                      <el-tab-pane  :label="item.name" :name="item.classid"  v-for="(item,index) in list" :key="index">                 
                      </el-tab-pane>           
                </el-tabs>
              <menuBody :chuan='activeName'></menuBody>
        <!-- 脚步结尾 -->
        <div class="menu_footer">
        <el-divider style="color: #ff6767;" content-position="left">当当快乐美食函！</el-divider>

          <h1>当当快乐生活</h1>
          <h2>菜谱 · 食材 · 魔方 · 关于我们 · 联系我们 · 加入我们 · 服务声明 · 友情链接 · 网站地图 · 移动应用</h2>
          <p>© 2020-2020  保留所有权利 03534号,期待你的到来！</p>
          <h5>山有木兮木有枝,心悦君兮君不知。</h5>
        </div>

         </el-col>
      </el-row>  
    </div>
</template>
<style >
  .menu{
    min-width: 1200px;
    margin-top:40px;
  }
  .my_menuheader{
    padding: 0 8px;
    border-radius: 10px;
   height: 80px;
   margin-top: 20px;
   background-color: antiquewhite;
   display: flex;
   justify-content: space-between;
   align-items: center;
  }
.my_menuheader ul:nth-child(2){
  font-size: 26px;
  display: flex;
  justify-content: space-evenly;
  color: #333;
}
.my_menuheader ul:nth-child(2) li{
    padding:0 10px;
    cursor: pointer;
}
.my_menuheader ul:nth-child(2) li:hover{
    color: #ff6767;    
}
.madeng{
  margin-top: 20px;

}
 .el-tabs__item{
   font-size: 20px ;
 }
 .el-tabs__item:hover,.is-active{
   color: #ff6767 !important;
 }
 .el-tabs__active-bar{
  background-color: #ff6767;
 }
 .menu_footer{
   height: 220px;
   text-align: center;
 }
.menu_footer>h1{
  margin-top: 60px;
  margin-bottom: 10px;
    color:#d67200;
    font-size: 16px;
}
.menu_footer>p{
  margin: 10px 0;
}
.menu_footer>h5{
  font-size: 18px;
}


</style>

<script >
 import menuBody from  '../components/menu_body'
  export default {
      data(){
        return {
          input:'',
          activeName:"2",
          list: [
                {
                    "classid": "2",
                    "name": "减肥",
                    "parentid": "1"
                },
                {
                    "classid": "3",
                    "name": "瘦身",
                    "parentid": "1"
                },
                {
                    "classid": "4",
                    "name": "消脂",
                    "parentid": "1"
                },
                {
                    "classid": "5",
                    "name": "丰胸",
                    "parentid": "1"
                },
                {
                    "classid": "6",
                    "name": "美容",
                    "parentid": "1"
                },
                {
                    "classid": "7",
                    "name": "养颜",
                    "parentid": "1"
                },
                {
                    "classid": "8",
                    "name": "美白",
                    "parentid": "1"
                },
                {
                    "classid": "9",
                    "name": "防晒",
                    "parentid": "1"
                },
                {
                    "classid": "10",
                    "name": "排毒",
                    "parentid": "1"
                },
                {
                    "classid": "11",
                    "name": "祛痘",
                    "parentid": "1"
                },]
        }
      },
      methods:{
          open() {
          this.$message('这是一条消息提示');
        },
          handleClick() {
           
          }
      },
      components:{
        menuBody
      }
  };
</script>
